<template>


    <el-card  class="dialog"  v-model="data.info.show">

      <el-row>
        <el-col :span="6">
          <div class="klist">


              <el-row>
                  <el-col :span="8">
                    <div class="avatar">
                      <el-icon size="30"><Avatar /></el-icon>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div class="username">
                      飞熊003
                    </div>
                  </el-col>
              </el-row>
             <el-divider></el-divider>
            <el-row>

               <el-input placeholder="搜索最近联络人"></el-input>
            </el-row>
            <el-row>

               <el-button v-for="item in 3" class="btn-kefu">客服{{item}}</el-button>

            </el-row>

          </div>


        </el-col>
        <el-col :span="18">

          <el-row>
            <div class="header"></div>

          </el-row>

        </el-col>
      </el-row>

    </el-card>





</template>

<script setup lang="ts">

import {reactive} from "vue";


const data = reactive({
  info:{
     show:true,
     url:''
  }
})
</script>

<style scoped>


.klist{
    height: 960px;
    overflow: hidden;
    background-color: #747e87;
    border-radius: 10px;
    border: 1px solid #b3b7bf;
    margin-top: -20px;
    margin-left: -20px;
}


.dialog{
   background-color: #6b778c;
  border-radius: 10px;
   height: 600px;
   width: 800px;
   margin-top: 120px;
   margin-left: auto;
   margin-right: auto;
   box-shadow:#afb7c5 -9px 14px 15px 6px;
}

.avatar{
     margin-left: 10px;
     margin-top: 5px;
     padding: 5px;
    width: 30px;
    height: 30px;
   border: 1px solid rgb(210 219 210 / 50%);
}

.username{
    padding: 10px;
    color: #efefef;
    font-weight: bolder;
}

.btn-kefu{
   width: 100%;
   height: 50px;
   background-color: #a6abb3;
   margin-left: 0;
   color: #efefef;
   margin-top: 5px;
   display: inline-block;

}

.header{
   width: 100%;
   height: 120px;
   background-color: #6b778c;
}

</style>